

<template>
    <!--
    * @轮子的作者: 轮子哥
    * @Date: 2023-07-4 15:34:18
 * @LastEditTime: 2023-10-13 17:04:23
    -->
    <div class="LunZiGe666">
        <div class="LunZiGeTag">
            <el-tabs v-model="editableTabsValue" type="card" class="LunziGeNav" @tab-remove="removeTab" @tab-click="goTo">
                <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.meta.name" :name="item.name"
                    :closable="item.name != 'home'">
                </el-tab-pane>
            </el-tabs>
            <div class="mNavRight">
                <PersonalSetting>
                    <img src="../../assets/images/h51.svg" class="mNavImg">
                </PersonalSetting>
                <PersonalSetting isLoginOut>
                    <img src="../../assets/images/h52.svg" class="mNavImg">
                </PersonalSetting>
                
            </div>
        </div>
        <div class="LunZiGe">

            <slot></slot>
        </div>
    </div>
</template>
<script  setup>
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useMenu } from '../../store/menu'
import PersonalSetting from '../personal/PersonalSetting.vue';

// 获取路由实例
const route = useRoute()
const menu = useMenu().routes

const editableTabsValue = ref('home')
const editableTabs = ref(JSON.parse(localStorage.getItem('menuNavs') ?? JSON.stringify([menu[0]])))


// 监听路由变化
watch(route, (obj) => {
    const getRouter = menu.filter((v) => v.path === obj.path)
    const isExist = editableTabs.value.filter((v) => v.path === obj.path)
    if (getRouter.length > 0 && isExist.length == 0) {
        getRouter[0].query = obj.query
        addTab(getRouter[0])
    } else {
        editableTabsValue.value = obj.name
    }
})

//点击跳转
const router = useRouter()
const goTo = (p) => {

    const path = editableTabs.value.filter(v => v.name === p.props.name)
    if (path.length > 0) {
        router.push({ path: path[0].path, query: path[0].query })
    }
}

//添加标签
const addTab = (obj) => {
    editableTabs.value.push(obj)
    editableTabsValue.value = obj.name
    localStorage.setItem("menuNavs", JSON.stringify(editableTabs.value))
}

//移出标签
const removeTab = (targetName) => {
    const tabs = editableTabs.value
    let activeName = editableTabsValue.value
    if (activeName === targetName) {
        tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
                const nextTab = tabs[index + 1] || tabs[index - 1]
                if (nextTab) {
                    activeName = nextTab.name
                }
            }
        })
    }

    editableTabsValue.value = activeName
    const path = editableTabs.value.filter(v => v.name === activeName)
    if (path.length > 0) {
        router.push({ path: path[0].path, query: path[0].query })
    }
    editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
    localStorage.setItem("menuNavs", JSON.stringify(editableTabs.value))

}
</script>

<style scoped>
.mNavRight {
    display: flex;
    gap: 20px;
    border-bottom: 1px solid #eee;
    align-items: center;
    padding-right: 30px;
    padding-left: 10px;
}

.mNavImg {
    width: 19px;
    height: 19px;
    padding-top: 2px;
}

.LunZiGe666 {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.LunZiGe {
    display: flex;
    width: 100%;
    height: calc(100% - 30px);
}

.LunZiGeTag {
    display: flex;
    width: 100%;
    justify-content: space-between;
    background: white;
    z-index: 991;
    position: sticky;
    top: 0;
}
</style>

<style>
.LunziGeNav {
    height: 29px;
    /* width: 100%; */
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
}

.LunziGeNav>.el-tabs__content {
    /* display: flex; */
    height: inherit;
}

.LunziGeNav>.el-tabs__content>.el-tab-pane {
    display: flex;
    height: inherit;
}

.el-tabs--card>.el-tabs__header {
    margin: 0;
    margin-top: -1px;
    height: 29px !important;
}

.LunziGeNav>.el-tabs__header>.el-tabs__nav-wrap>.el-tabs__nav-scroll>.el-tabs__nav>.el-tabs__item {
    font-size: 13px;
    height: 29px;
    line-height: 29px;
}
.LunziGeNav>.el-tabs__header>.el-tabs__nav-wrap>.el-tabs__nav-next{
    height: 29px;
    line-height: 35px;
}
.LunziGeNav>.el-tabs__header>.el-tabs__nav-wrap>.el-tabs__nav-prev{
    height: 29px;
    line-height: 35px;
}
.LunziGeNav>.el-tabs__header>.el-tabs__nav-wrap>.el-tabs__nav-next:hover{
    background: #eee;
}
.LunziGeNav>.el-tabs__header>.el-tabs__nav-wrap>.el-tabs__nav-prev:hover{
    background: #eee;
}

</style>
  